<template>
  <view class="container" style="position: relative;">
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="content">补片</block>
    </cu-custom>
    <view class="padding padding-top solid-bottom" style="font-size: 30rpx;">
      <view class="flex justify-between align-center">
        <view>订单：{{data.orderNo}}</view>
        <view>序号：{{data.seq}}</view>
      </view>
      <view class="flex justify-between align-center margin-tb">
        <view>款号：{{data.refNo||''}}</view>
        <view v-if="data.smyRefInfPictureList&&data.smyRefInfPictureList.length">裁片数量：{{data.smyRefInfPictureList.length}}</view>
      </view>
      <view class="flex justify-between align-center margin-bottom">
        <view>型号：{{data.refName||''}}</view>
      </view>
    </view>
    <view class="padding padding-top flex flex-wrap justify-between" style="padding-bottom: 300rpx;">
      <view v-for="(el,index) in data.smyRefInfPictureList" @click="setInput(el)" style="width: 48%;position: relative;" class="margin-bottom-xs">
        <view style="position: absolute;left: -10rpx;top:-10rpx;z-index: 99;">
          <image src="/static/icon/selectActive.png" v-if="selectIds.includes(el.id)" mode="widthFix" style="width:40rpx;"></image>
          <image src="/static/icon/selectActive1.png" v-else mode="widthFix" style="width:40rpx;"></image>
        </view>
        <image :src="el.url" mode="widthFix" style="width: 100%;" v-if="el.url"></image>
        <image src="/static/none.png" mode="widthFix" style="width: 100%;" v-else></image>
      </view>
    </view>
    <u-notify ref="uNotify"></u-notify>
    <view class="sumbitModle">
      <button class="sumbit" @click="setPop(1)">补选中的{{selectIds.length}}个裁片</button>
      <button class="sumbit margin-top-xs" @click="setPop(2)">补整套所有的裁片</button>
    </view>
    <u-popup class="searchBoxModel" :show="show" mode="center" @close="show = false">
      <view class="sharePoup">
        <view class="headModal">
          提交补片
          <image src="../../static/icon/close.png" @click="show = false" mode="widthFix" style="width: 20upx;position: absolute;right: 20rpx;">
          </image>
        </view>
        <view class="padding-bottom form-box">
          <u--form labelPosition="left" :model="searchForm" ref="uForm" labelWidth="120">
            <u-form-item label="责任人:" borderBottom ref="item3">
              <u--input v-model="form.responsibleName" placeholder="请输入责任人" border="none"></u--input>
            </u-form-item>
            <u-form-item label="金额:" borderBottom ref="item5">
              <u--input v-model="form.amount" placeholder="请输入金额" border="none"></u--input>
            </u-form-item>
            <u-form-item label="补片原因:" borderBottom ref="item4">
              <u-textarea v-model="form.reason" placeholder="请输入补片原因" border="none"></u-textarea>
            </u-form-item>
          </u--form>
        </view>
        <button class="sumbit pop" @click="sumbit()">提交</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    components: {},
    data() {
      return {
        selectIds: [],
        show: false,
        type: 1,
        form: {
          responsibleName: "",
          reason: "",
          amount: ""
        },
        data: {

        }
      };
    },
    onPageScroll(e) {},
    onReady() {},
    onLoad(option) {
      console.log(option)
      if (option.orderNo) {
        this.data = { ...option }
        this.getALLData()
      }
    },
    onShow() {},
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      sumbit() {
        const pattern = /^-?(\d+(\.\d*)?|\.\d+)$/;
        if (!this.form.responsibleName || !this.form.reason || !this.form.amount) {
          this.$api.msg('请完善补片信息~')
          return
        }
        if (!pattern.test(this.form.amount)) {
          this.$api.msg('金额必须是数字~')
          return
        }
        this.$ComFunJS.ajax({
          method: 'post',
          data: {
            orderId: this.data.orderId,
            orderNo: this.data.orderNo,
            seq: this.data.seq,
            responsibleName: this.form.responsibleName,
            amount: this.form.amount,
            reason: this.form.reason,
            isWhole: this.type == 1 ? 0 : 1,
            urls: this.type == 1 ? this.selectIds.map((res) => {
              return this.data.smyRefInfPictureList[this.data.smyRefInfPictureList.findIndex(a => a.id == res)]
            }) : this.data.smyRefInfPictureList
          },
          url: "/system/wechat/patch/submit",
          success: (res) => {
            if (res.code == 200) {
              this.$api.msg('操作成功~');
              uni.navigateBack()
            }
          }
        })
      },
      setPop(type) {
        this.type = type;
        if (type == 1 && !this.selectIds.length) {
          this.$api.msg('请先选择裁片~');
          return
        }
        this.show = true;
      },
      setInput(el) {
        if (this.selectIds.includes(el.id)) {
          this.selectIds.splice(this.selectIds.findIndex(a => a == el.id), 1)
        } else {
          this.selectIds.push(el.id)
        }
      },
      getALLData() {
        this.$ComFunJS.ajax({
          method: 'get',
          data: {
            orderNo: this.data.orderNo,
            seq: this.data.seq ? this.data.seq : 1
          },
          url: "/system/wechat/patch/infoProducts",
          success: (res) => {
            if (res.code == 200) {
              this.data = res.data
              this.data.smyRefInfPictureList = this.data.smyRefInfPictureList.map((model) => {
                model.url =
                  model.url ? `${this.$ComFunJS.apiWebHost}/system/wechat/file/local/v2/6/${this.userInfo.tenantGroupId}/${model.url}` : ''
                return model
              })
            } else {
              this.$api.msg(res.msg)
            }
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  page {
    background: #fff;
  }

  .modelShowTitle {
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(49, 55, 64, 1);
    margin-bottom: 12rpx;
  }

  .inputPlace {
    color: rgba(0, 0, 0, 0.5);
  }

  .modelInput {
    width: 100%;
    height: 96rpx;
    background: rgba(165, 168, 173, .08);
    border-radius: 12rpx;
    min-height: 48px;
    padding: 14rpx;
    display: flex;
    align-items: center;

    input {
      width: 100%;
      color: #2a2a2a;
      background: none;
      border: none;
    }
  }

  .qrcodeModal2 {
    padding: 30upx 160upx;
    position: absolute;
    width: 100%;
    top: 300rpx;
    opacity: .2;

    .qrcodeText {
      position: relative;
      font-size: 28upx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(41, 63, 102, 1);
      text-align: center;
      top: -100upx;
    }
  }

  .qrcodeModal {
    padding: 30upx;
    width: 100%;

    .qrcodeText {
      position: relative;
      font-size: 40upx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(41, 63, 102, 1);
      text-align: center;
      top: -100upx;
    }

    .qrcodeIntro {
      font-size: 28upx;
      position: relative;
      font-weight: 400;
      color: rgba(154, 165, 184, 1);
      text-align: center;
      top: -90upx
    }
  }

  .qrcodeButton {
    width: 100%;
    height: 96upx;
    opacity: 1;
    border-radius: 122upx;
    background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
    box-shadow: 0px 17upx 51upx rgba(233, 239, 245, 1);
    text-align: center;
    font-size: 28upx;
    color: #fff;
    line-height: 96upx;
    letter-spacing: 2upx;
  }

  .u-modal__content {
    flex-direction: column !important;
  }

  .cancleBtn {
    width: 260.62upx;
    height: 80upx;
    opacity: 1;
    border-radius: 12rpx;
    background: rgba(0, 0, 0, 0.05);
    font-size: 32upx;
    font-weight: 500;
    letter-spacing: 6px;
    color: rgba(49, 55, 64, 1);

    &.sumbit {
      background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
      color: #FFFFFF;
    }
  }

  .dateItem {
    width: 100%;
    opacity: 1;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 30rpx;
    margin-top: 16rpx;

    .headBox {
      border-bottom: 1px solid rgba(154, 165, 184, 0.11);
      padding: 20rpx 0;
    }

    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(49, 55, 64, 1);
      text-align: left;
    }

    .date {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(130, 132, 135, 1);
      text-align: left;
    }

    .allPrice {
      font-size: 34rpx;
      font-weight: 700;
      color: rgba(18, 96, 252, 1);
    }

    .price {
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(130, 132, 135, 1);
    }
  }

  .sumbitModle {
    position: fixed;
    bottom: 100rpx;
    width: calc(100% - 80rpx);
    left: 40rpx;
  }

  .sumbit {
    height: 96rpx;
    opacity: 1;
    border-radius: 16rpx;
    background: rgba(18, 96, 252, 1);
    box-shadow: 0px 17rpx 51rpx rgba(233, 239, 245, 1);
    font-size: 28rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    &.pop {
      width: calc(100% - 80rpx);
    }
  }

  .sharePoup {
    width: 700rpx;

    .form-box {
      padding: 0 30rpx;
    }

    .headModal {
      height: 100upx;
      position: relative;
      display: flex;
      justify-content: center;
      background: #f5f5f5;
      border-top-right-radius: 8rpx;
      border-top-left-radius: 8rpx;
      align-items: center;
      font-size: 32upx;
      font-weight: 500;
      color: rgba(49, 55, 64, 1);
    }

    .timeModel {
      width: 100%;
      height: 600upx;
      padding: 0 40upx;
      padding-bottom: 10upx;
    }

    .searchModel {
      padding: 20rpx 0;
    }

    .selectText {
      color: rgb(192, 196, 204);
      font-size: 32rpx;

      &.change {
        color: #303133;
      }
    }
  }
</style>